<template>
  <div class="box-card">
    <div class="left-title">
      <div class="txt">{{ name }}</div>
    </div>
    <el-tree
      ref="leftTree"
      class="left-tree"
      highlight-current
      :data="list"
      :props="defaultProps"
      node-key="id"
      :default-expand-all="false"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    >
      <div slot-scope="{ node, data }" class="over-tooltip-parent">
        <DtOverTooltip :content="data.name" />
      </div>
    </el-tree>
  </div>
</template>

<script>
import { getAppServiceList } from '@/framework/api/interfaceMag/index.js'

export default {
  props: {
    name: {
      type: String,
      default: '接口分类列表'
    }
  },
  data() {
    return {
      filterText: '',
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectTree: ''
    }
  },
  mounted() {
    this.getTreeList()
  },
  methods: {
    handleNodeClick(row) {
      this.selectTree = {
        code: row.code,
        level: row.level,
        id: row.id
      }
      this.$emit('treeClick', this.selectTree)
    },
    getTreeList() {
      getAppServiceList().then((res) => {
        this.list = [{
          name: '全部',
          children: res.data || [],
          id: '',
          level: 0,
          code: ''
        }]
        this.handleNodeClick({ code: '', level: '', id: '' })
        this.$nextTick(() => {
          this.$refs.leftTree.setCurrentKey('')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .left-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    .txt{
    color: #131314;
    font-size: 14px;
    line-height: 24px;
    padding-left: 12px;
    position: relative;
    &::before{
      content: '';
      position: absolute;
      width: 4px;
      height: 16px;
      background: var(--themeColor);
      left:0;
      top: 4px;
    }
  }

  }
  .left-tree{
    margin-top: 12px;
  }
    ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
          background-color:var(--lightOpacity)
    }
  ::v-deep .el-tree-node__content:hover, .el-upload-list__item:hover{
    background-color:var(--lightOpacity)
  }
  ::v-deep .el-tree-node__content{
    overflow: hidden;
    margin: 1px 0px
  }
</style>
